import React, {memo, useEffect, useState} from 'react';
import AlbumDetailsStyle from "./IndexStyle";
import {Button, Table} from "antd";
import {getHourMineSecondBySecond} from "../../../../utils/timeFormatting";
import UnitBox from "../../../../components/part/unitBox/UnitBox";
import {getAlbumByIdApi, getAlbumMusicListApi} from "../../../../services/album";
import {AlbumInterface} from "../../../../interface/AlbumInterface";
import {format} from "util";
import {dateFormat} from "../../../../utils/dateFormat";
import {MusicCollect} from "../../../../interface/MusicCollectInterface";
import {MusicInsertDTO} from "../../../../interface/MusicInterface";

/**
 * 专辑详情页,专辑详情页有两个主键,
 * 所以在导入时,根据需要去引用
 */
type Props = {
  id:number
};
type TableDataType={
  musicName:string,
  musicSinger:string,
  musicAlbum:string,
  musicTimer:number,
};
const AlbumDetailsCover=memo(function (props:Props) {
  const [cover,setCover] = useState<string>();
  useEffect(() => {
    getAlbumByIdApi(props.id).then((result:any)=>{
      console.log(result);
      setCover(result.data.data.albumCover);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <AlbumDetailsStyle $cover={cover}>
      <div className="album-details-cover"></div>
    </AlbumDetailsStyle>
  );
});

const AlbumDetailsInfo= memo(function (props: Props) {
  const [albumObj,setAlbumObj]=useState<AlbumInterface>({});
  useEffect(() => {
    getAlbumByIdApi(props.id).then((result:any)=>{
      setAlbumObj(result.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  return (
    <AlbumDetailsStyle>
      <div className="info-title">{albumObj.albumName}</div>
      <div className="create-username iconfont">&#xe658; &nbsp;&nbsp;{albumObj.albumSingerName}</div>
      <div className="info-box">
        {/*<div>专辑: 一次就好</div>*/}
        {/*<div>语种: 国语</div>*/}
        {/*<div>流派: Pop</div>*/}
        <div>发布单位: 武汉一寸光年数字媒体有限公司</div>
        <div>发布时间: {dateFormat(albumObj.albumTime)}</div>
      </div>
      <div className="btn-list-box">
        <Button className="iconfont album-details-btn select-btn" >&#xe87c; 播放全部</Button>
        <Button className="iconfont album-details-btn">&#xe604; 添加到</Button>
        <Button className="iconfont album-details-btn">&#xe606; 下载</Button>
        <Button className="iconfont album-details-btn">&#xe891; 评论(234)</Button>
      </div>
    </AlbumDetailsStyle>
  );
});

const AlbumDetailsContent=memo(function (props: Props) {
  const {Column} = Table;
  const [tableData,setTableData]=useState<MusicInsertDTO[]>([]);
  useEffect(() => {
    getAlbumMusicListApi({albumId:props.id}).then((result:any)=>{
      console.log(result);
      setTableData(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);
  // const tableData:Array<TableDataType>=[
  //   {
  //     musicName:"把回忆拼接好给你",
  //     musicSinger:"王壹浪",
  //     musicAlbum:"把回忆拼接好给你",
  //     musicTimer:381
  //   },
  //   {
  //     musicName:"太阳(正式版)",
  //     musicSinger:"曲肖冰",
  //     musicAlbum:"太阳",
  //     musicTimer:257
  //   },
  //   {
  //     musicName:"用力活着",
  //     musicSinger:"张茜",
  //     musicAlbum:"用力活着",
  //     musicTimer:381
  //   },
  //   {
  //     musicName:"倒数",
  //     musicSinger:"邓紫棋",
  //     musicAlbum:"倒数",
  //     musicTimer:257
  //   },
  // ]
  return (
    <AlbumDetailsStyle>
      <Table dataSource={tableData} >
        <Column title="歌曲名称" dataIndex="name" key="name"
                render={(_:any,record:MusicInsertDTO)=>{
                  return(<div className="music-name-td">
                    <span className="music-name">{record.name}</span>
                    <span className="music-btn music-play-btn iconfont">&#xe624;</span>
                    <span className="music-btn music-add-btn iconfont">&#xe84f;</span>
                  </div>);
                }}
        />
        <Column title="歌手" dataIndex="singerName" key="singerName"/>
        <Column title="专辑" dataIndex="albumName" key="albumName"/>
        <Column title="时长" dataIndex="timer" key="timer"
                render={(_:any,record:MusicInsertDTO)=>{
                  return (<>{getHourMineSecondBySecond(record.timer as number)}</>)
                }}
        />
      </Table>
    </AlbumDetailsStyle>
  );
});

const AlbumDetailsSidebar=memo(function(props:Props){
  return(
    <AlbumDetailsStyle>
      {/*<div className="album-details-sidebar-box">*/}
      {/* <UnitBox*/}
      {/*   color={"#000"}*/}
      {/*   title={"简介"}*/}
      {/*   size={20}*/}
      {/*   isLeft={true}*/}
      {/* >*/}
      {/*   <div className="album-details-sidebar-info">*/}
      {/*     我会等枯树生出芽 开出新的花 等着阳光刺破黑暗 第一缕朝霞 我会等一场雨落下 把回忆都冲刷 再与你一起去看 外面世界 到底有多大*/}
      {/*   </div>*/}
      {/* </UnitBox>*/}
      {/*  <UnitBox*/}
      {/*    color={"#000"}*/}
      {/*    title={"相关推荐"}*/}
      {/*    size={20}*/}
      {/*    isLeft={true}*/}
      {/*  >*/}
      {/*    <></>*/}
      {/*  </UnitBox>*/}

      {/*</div>*/}
    </AlbumDetailsStyle>
  );
});

export  {AlbumDetailsCover, AlbumDetailsInfo,AlbumDetailsContent,AlbumDetailsSidebar};
